<template>
  <div class=" back-img" :style="{background: 'url('+bgimgUrl+')'}">
    <div class=" fieldset">
      <div class="input-box">
        <p>注册</p>
        <el-form :model="user" label-width="160px" :rules="regestRules" ref="regestRef">
          <el-form-item label="昵称" prop="uname">
            <el-input
                placeholder="昵称可以不是真实姓名"
                style="width: 300px"
                v-model="user.uname"
                clearable
            />
          </el-form-item>
          <el-form-item label="手机号" prop="uphone">
            <el-input
                placeholder="用于登录的手机号"
                style="width: 300px"
                v-model="user.uphone"
                clearable
            />
          </el-form-item>
          <el-form-item label="性别" prop="ugender">
            <el-select v-model="user.ugender" class="m-2" placeholder="选择性别" size="Select">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="密码" prop="upassword">
            <el-input
                type="password"
                placeholder="请输入密码"
                style="width: 300px"
                v-model="user.upassword"
            />
          </el-form-item>
          <el-form-item label="请再次输入密码" prop="repassword">
            <el-input
                type="password"
                placeholder="请再次输入密码"
                style="width: 300px"
                v-model="user.repassword"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="verify">
            <el-input
                placeholder="手机收到的4位验证码"
                style="width: 300px"
                v-model="user.verify"
                clearable
            />
            <el-button plain @click="getVerCode">获取验证码</el-button>
          </el-form-item>
          <el-form-item label="头像" prop="uimg">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8081/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
              <img v-if="user.uimg" :src="user.uimg" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-row class="mb-4">
              <el-button round @click="regestSubmit">提交</el-button>
              <el-button round @click="resetRegest">重置</el-button>
              <a class="returnLogin" href="JavaScript:;" @click="toLogin()"><span>已有账号，返回登录</span></a>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "RegestComp",
  data() {
    var validPass = (rule, value, callback) => {
      if (value === '') {
        // 校验不通过
        return callback(new Error('请输入密码'))
      } else if (value.length < 8 || value.length > 16) {
        return callback(new Error('密码只能为8-16位'))
      } else if (!(/^[A-Za-z0-9._]{0,17}$/g.test(value))) {
        return callback(new Error('密码只能包括字母数字和._'))
      } else if (this.upassword !== this.repassword) {
        return callback(new Error('两次密码不相同'))
      } else {
        callback();
      }
    }
    return {
      bgimgUrl: require("../../regest/background-main-green.png"),
      user: {
        uname: '',
        uphone: '',
        upassword: '',
        ugender: '',
        repassword: '',
        verify: '',
        uimg: '',
      },
      options: [
        {value: '1', label: '女'},
        {value: '2', label: '男'},
      ],
      regestRules: {
        uname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {max: 5, message: '长度必须小于5个字符', trigger: 'blur'},
        ],
        uphone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {
            min: 11, max: 11, message: '输入正确的手机号', trigger: 'blur',
            pattern: /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/,
          },
        ],
        upassword: [
          {required: true, validator: validPass},
        ],
        ugender: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ],
        repassword: [
          {required: true, validator: validPass},
        ],
        verify: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        uimg: [
          {required: true, message: '请上传头像', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    /**
     * 图床返回的数据
     * @param e
     */
    handleAvatarSuccess(e) {
      console.log(e.data.url)
      this.user.uimg = e.data.url
    },
    /**
     * 提交注册
     */
    regestSubmit() {
      this.$refs['regestRef'].validate((res) => {
        if (res) {
          doThis.doGet("/user/regest", this.user).then(res => {
            console.log(res)
            // alert()
            if (res.code === "0") {
              ElMessage({
                message: res.msg,
                type: 'success',
              })
              this.toLogin()
            }else {
              ElMessage.error(res.msg)
            }
          })
        }
      })
    },
    /**
     * 重置表单
     */
    resetRegest() {
      this.user = {
        uname: '',
        uphone: '',
        upassword: '',
        ugender: '',
        repassword: '',
        verifi: '',
        uimg: '',
      }
    },
    /**
     * 获取验证码
     */
    getVerCode() {
      doThis.doGet("/user/sendVefy", {phone: this.user.uphone}).then(res => {
        console.log(res)
        // alert()
        if (res.code === "0") {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
        }else {
          ElMessage.error(res.msg)
        }
      })
    },
    toLogin() {
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
.back-img {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 48vw;
}

p {
  color: #008559;
  text-align: center;
  font-size: 46px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 24px;
}

#app {
  margin: 0;
}

.input-box {

}

.fieldset {
  position: absolute;
  width: 580px;
  height: 740px;
  background-color: rgb(250, 250, 250);
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 80px -1px #00521b;
  margin: 100px 35%;
}

p {
  margin-top: 46px;
  color: #008559;
  text-align: center;
  font-size: 46px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 24px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
}

.returnLogin {
  margin: 0px 40px;
}
</style>